#con {
    width: 750px;
    height: 300px;
    overflow: hidden;
    margin: 20px auto;
    position: relative;
}

img {
    width: 750px;
    height: 300px;
}

.dian {
    height: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
}

.dian li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(11, 12, 125, 0.5);
    margin: 0 10px;
}

.dian li.active {
    background-color: crimson;
/* 注意 在li中添加选择器没有空格 */
}

.arrow {
    width: 50px;
    height: 50px;
    background-color: crimson;
    position: absolute;
    top: 100px;
    font-size: 20px;
    color: #eeeeee;
    line-height: 50px;
    text-align: center;

}

.left {
    left: 10px;
}

.right {
    right: 10px;

}